<template>
  <view>
    <view class="device-title">
      <view class="device-name"
        ><text>{{ basicDetail.deviceName }}</text></view
      >
      <view class="code"
        >设备编号：<text>{{ basicDetail.deviceCode }}</text></view
      >
      <view class="useStatus"
        ><text>{{ basicDetail.useStatusLabel }}</text></view
      >
    </view>
    <uni-collapse @change="onChange" class="collapse">
      <CollapseItem
        :show-arrow="false"
        title-border="show"
        title="基本信息"
        index="0"
        :indexList="indexList"
        :show-animation="true"
        background-color="#8eb3c3"
      >
        <BasicInfoDetail :detail="basicDetail"></BasicInfoDetail>
      </CollapseItem>
      <CollapseItem
        :show-arrow="false"
        title-border="show"
        title="设备参数"
        index="1"
        :indexList="indexList"
        :show-animation="true"
        background-color="#c2c08a"
      >
        <FeatureAttributeDetail
          :feature-list="basicDetail.featureList"
        ></FeatureAttributeDetail>
      </CollapseItem>
      <CollapseItem
        title="辅机"
        :show-arrow="false"
        title-border="show"
        index="2"
        :indexList="indexList"
        :show-animation="true"
        background-color="#8DC39D"
      >
        <SparePartsDetail
          :material-list="basicDetail.materialList"
        ></SparePartsDetail>
      </CollapseItem>
	  <CollapseItem
	    title="定检、自检、诊断报告"
	    :show-arrow="false"
	    title-border="show"
	    index="3"
	    :indexList="indexList"
	    :show-animation="true"
	    background-color="#8B8ec3"
	  >
	    <many-report-detail
	      :check-list="basicDetail.checkList"
	    ></many-report-detail>
	  </CollapseItem>
      <CollapseItem
        title="安全附件"
        :show-arrow="false"
        title-border="show"
        index="4"
        v-show="basicDetail.deviceGroup !== '13'"
        :indexList="indexList"
        :show-animation="true"
        background-color="#8eb3c3"
      >
        <accessoriesDetail
          :accessories-list="accessoriesList"
        ></accessoriesDetail>
      </CollapseItem>
      <CollapseItem
        title="点检记录"
        :show-arrow="false"
        title-border="show"
        index="5"
        :indexList="indexList"
        :show-animation="true"
        background-color="#c2c08a"
      >
        <PointInspectRecords
          :record-number="pointRecordNum"
          :standard-number="pointStandardNum"
          :device-id="id"
        >
        </PointInspectRecords>
      </CollapseItem>
      <CollapseItem
        title="润滑记录"
        :show-arrow="false"
        title-border="show"
        index="6"
        :indexList="indexList"
        :show-animation="true"
        background-color="#8DC39D"
      >
        <LubricationRecord
          :record-number="lubricationRecordNum"
          :standard-number="lubricationStandardNum"
          :device-id="id"
        ></LubricationRecord>
      </CollapseItem>
      <CollapseItem
        title="维保记录"
        :show-arrow="false"
        title-border="show"
        index="7"
        :indexList="indexList"
        :show-animation="true"
        background-color="#8B8ec3"
      >
        <MaintenanceRecords
          :record-number="maintenanceRecordNum"
          :standard-number="maintenanceStandardNum"
          :device-id="id"
        ></MaintenanceRecords>
      </CollapseItem>
      <CollapseItem
        title="检修记录"
        :show-arrow="false"
        title-border="show"
        index="8"
        :indexList="indexList"
        :show-animation="true"
        background-color="#8eb3c3"
      >
        <RepairRecords
          :record-number="repairRecordNum"
          :standard-number="repairStandardNum"
          :device-id="id"
        >
        </RepairRecords>
      </CollapseItem>
    </uni-collapse>
    <view class="submit-group">
      <button class="u-button margin-right-xs" type="primary" :ripple="true" @click="startInspect">
        开始点检
      </button>
    </view>
  </view>
</template>

<script>
import {
  getDeviceStandingBookById,
  getPointInspectStandard,
  getPointInspectRecord,
  getLubricationStandard,
  getLubricationRecord,
  getMaintenanceRecord,
  getMaintenanceStandard,
  getRepairStandard,
  getRepairRecord,
  getAccessoryById,
  getDeviceStandingBookByPoi
} from '@/api/equipment/device-manage.js';
import BasicInfoDetail from './components/basic-info-detail.vue';
import FeatureAttributeDetail from './components/feature-attribute-detail.vue';
import AccessoriesDetail from './components/accessories-detail.vue';
import LubricationRecord from './components/lubrication-record.vue';
import MaintenanceRecords from './components/maintenance-records.vue';
import ManyReportDetail from './components/many-report-detail.vue';
import PointInspectRecords from './components/point-inspect-records.vue';
import SparePartsDetail from './components/spare-parts-detail.vue';
import RepairRecords from './components/repair-records.vue';
import CollapseItem from './components/CollapseItem.vue';

export default {
  components: {
    BasicInfoDetail,
    FeatureAttributeDetail,
    LubricationRecord,
    MaintenanceRecords,
    PointInspectRecords,
    SparePartsDetail,
    ManyReportDetail,
    RepairRecords,
    AccessoriesDetail,
    CollapseItem,
  },
  data() {
    return {
      id: 0,
      devicePositionNum: null,
      // 基础信息
      basicDetail: {},
      featureList: [],
      indexList: ['0', '1', '2', '3', '4', '5', '6', '7', '8'],
      pointRecordNum: 0,
      pointStandardNum: 0,
      lubricationRecordNum: 0,
      maintenanceRecordNum: 0,
      repairRecordNum: 0,
      lubricationStandardNum: 0,
      maintenanceStandardNum: 0,
      repairStandardNum: 0,
      accessoriesList: [],
    };
  },
  onLoad({id, devicePositionNum}) {
    console.log('id:' + id, 'devicePositionNum:'+devicePositionNum);
    this.id = Number(id);
    this.devicePositionNum = devicePositionNum;
  },
  async created() {
    if (!this.id) {
      const result = await getDeviceStandingBookByPoi(this.devicePositionNum)
      this.id = result.data.id
    }

    await this.getBasicInfo();
    await this.getPointInspectInfo();
    await this.getLubricationInfo();
    await this.getMaintenanceInfo();
    await this.getRepairInfo();
    await this.getAccessory();
  },
  methods: {
    async getBasicInfo() {
      const res = await getDeviceStandingBookById(this.id);

      console.log(res.data);
      this.basicDetail = res.data;
    },
    async getAccessory() {
      const res = await getAccessoryById(this.id);
      console.log(res.data);
      this.accessoriesList = res.data;
    },
    async getPointInspectInfo() {
      const res1 = await getPointInspectStandard(this.id);
      const res2 = await getPointInspectRecord(this.id);
      this.pointStandardNum = res1.total;
      this.pointRecordNum = res2.total;
    },
    async getLubricationInfo() {
      const res1 = await getLubricationStandard(this.id);
      const res2 = await getLubricationRecord(this.id);
      this.lubricationStandardNum = res1.total;
      this.lubricationRecordNum = res2.total;
    },
    async getMaintenanceInfo() {
      const res1 = await getMaintenanceStandard(this.id);
      const res2 = await getMaintenanceRecord(this.id);
      this.maintenanceStandardNum = res1.total;
      this.maintenanceRecordNum = res2.total;
    },
    async getRepairInfo() {
      const res1 = await getRepairStandard(this.id);
      const res2 = await getRepairRecord(this.id);
      this.repairStandardNum = res1.total;
      this.repairRecordNum = res2.total;
    },
    onChange(e) {
      this.indexList = e;
    },
    startInspect(){
      uni.navigateTo({
        url: `/pages/work/intelligentPatrolInspection/spotCheck/index?deviceId=${this.id}`,
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.collapse {
  background-color: rgb(245, 245, 245);
  width: 650rpx;
  margin-left: 50rpx;
  margin-right: 50rpx;
  border-radius: 20rpx 20rpx 0 0;
  padding-bottom: 70px;
}

.device-title {
  position: relative;
  background: #8eb3c3;
  width: 750rpx;
  height: 200rpx;
  margin-bottom: 50rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #f9f9f9;
  align-items: center;
  justify-content: space-between;

  .device-name {
    padding-top: 55rpx;
    font-size: 35rpx;
    text-align: center;
  }

  .code {
    font-size: 26rpx;
    text-align: center;
  }

  .useStatus {
    border-bottom-left-radius: 10rpx;
    background-color: #a4c2cf;
    display: block;
    width: 100rpx;
    height: 50rpx;
    position: absolute;
    right: 0;
    top: 0;
    padding-top: 7rpx;
    text-align: center;
  }
}
.submit-group {
  background: #fff;
  z-index: 9;
  padding: 10px 30px;
}
.submit-group ::v-deep .u-button{
  margin: 0 auto;
}
</style>
